<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-turn-book">
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isManual" label="是否手动" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isFullScreen" label="页面缩放类型" :valLists="RESIZE_TYPE" v-model="commonAttr.resizeType" @change="onChangeAttr"></dropdown-normal>
      <dropdown-normal label="动画播放完弹出弹层" v-model="commonAttr.popId" :valLists="getLists(PAGE_TYPE_.pop)" @change="onChangeAttr"></dropdown-normal>
      <dropdown-normal label="动画播放完弹出页面" v-model="commonAttr.pageId" :valLists="getLists(PAGE_TYPE_.page)" @change="onChangeAttr"></dropdown-normal>
      <el-button type="primary" @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10"><el-icon><i class="jy-icon-plus"></i></el-icon>增加页面</el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            书页{{index+1}}
            <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

import { editUtils } from '@/views/js/edit-utils'
import { PAGE_TYPE_ } from '@/common/const'
import { RESIZE_TYPE } from '@/common/const-canvas'


export default {
  name: "RightTurnBook",
  mixins: [editUtils],
  setup () {
    return {
      PAGE_TYPE_: PAGE_TYPE_,
      RESIZE_TYPE: RESIZE_TYPE,
    };
  },
  components: {
    RightTemplate,
    AddImgCon,
    DropdownNormal,
    SwitchNormal,
  },
};
</script>
